<template>
	<view class="order-index">
		<u-sticky>
			<u-subsection :list="orderStatus" 
			:current="orderCurrent" 
			@change="orderStatusChange" 
			activeColor="#FF5722" 
			:fontSize="28" 
			mode="button">
			</u-subsection>
		</u-sticky>
		<view class="order-list">
			<u-empty
			    mode="order"
				:iconSize="100"
			    icon="order"
				:show="!orderList.length"
				:marginTop="100"
				:textSize="30"
			>
			</u-empty>
			
			<view class="order-item" v-for="(item,key) in orderList" :key="key">
				<view class="order-item__info flex">
					<view class="title">订单编号</view>
					<view class="value">{{ item.order_no }}</view>
				</view>
				<view class="order-item__info flex">
					<view class="title">线路名称</view>
					<view class="value">{{ item.route_name }}</view>
				</view>
				<view class="order-item__info flex">
					<view class="title">规格明细</view>
					<view class="value">{{ item.sku_name }}</view>
				</view>
				<view class="order-item__info flex">
					<view class="title">出行人数</view>
					<view class="value">
						<u-text :size="32" :text="item.nums" :bold="true"></u-text>
					</view>
				</view>
				<view class="order-item__info flex">
					<view class="title">出行日期</view>
					<view class="value">{{ item.date }}</view>
				</view>
				<!-- <view class="order-item__info flex">
					<view class="title">房型安排</view>
					<view class="value flex">
						<u-text :size="32" :text="'双床房 '+item.double_room+' 间'" :show="item.double_room>0"></u-text>
						<u-text :size="32" :text="'大床房 '+item.big_room+' 间'" :show="item.big_room>0"></u-text>
					</view>
				</view> -->
				<view class="order-item__info flex">
					<view class="title">订单金额</view>
					<view class="value">
						<u-text :size="32" color="#ff5a5f" :iconStyle="{color:'#ff5a5f'}" prefixIcon="rmb" :text="item.order_amt" :bold="true"></u-text>
					</view>
				</view>
				<!-- <view class="order-item__info flex">
					<view class="title">支付方式</view>
					<view class="value">
						<u-text :size="32" color="#18b566" :iconStyle="{color:'#18b566',marginRight:'8rpx'}" prefixIcon="weixin-circle-fill" :text="item.pay_type_display" :show="item.pay_type==1"></u-text>
						<u-text :size="32" color="#2b85e4" :iconStyle="{color:'#2b85e4',marginRight:'8rpx'}" prefixIcon="zhifubao-circle-fill" :text="item.pay_type_display" :show="item.pay_type==2"></u-text>
					</view>
				</view> -->
				<view class="order-item__info flex">
					<view class="title">订单状态</view>
					<view class="value flex">
						<u-text :size="32" color="#dd6161" :text="item.outer_status_display" :show="item.outer_status==0"></u-text>
						<u-text :size="32" color="#f29100" :text="item.outer_status_display" :show="item.outer_status==1"></u-text>
						<u-text :size="32" color="#18b566" :text="item.outer_status_display" :show="item.outer_status==2"></u-text>
						<u-text :size="32" color="#fab6b6" :text="item.outer_status_display" :show="item.outer_status==3"></u-text>
						<u-text :size="32" color="#19be6b" :text="item.outer_status_display" :show="item.outer_status==4"></u-text>
						<u-text :size="32" color="#19be6b" :text="item.outer_status_display" :show="item.outer_status==5"></u-text>
						
						
						
						<template v-if="item.use_deposit==1 && item.status != 1">
							<u-button :text="'付定金'+item.deposit_amt" color="#dd6161" size="small" :customStyle="{width:'150rpx'}" v-if="item.outer_status==0" @click="payment(item.order_id)"></u-button>
							
							<u-button :text="'付尾款'+item.final_amt" color="#dd6161" size="small" :customStyle="{width:'150rpx'}" v-if="item.outer_status==5" @click="payment(item.order_id)"></u-button>
						</template>
						<template v-else>
							<u-button text="去支付" color="#dd6161" size="small" :customStyle="{width:'100rpx'}" v-if="item.outer_status==0" @click="payment(item.order_id)"></u-button>
						</template>
						
						<!-- <u-button text="去评价" color="#f29100" size="mini" :customStyle="{width:'100rpx'}" v-if="item.outer_status==3"></u-button> -->
					</view>
				</view>
			</view>
		</view>
		
		<u-loadmore :status="loadStatus" fontSize="32" :iconSize="32" line />
	</view>
</template>

<script>
	import { getRoutesOrders,orderUnionPayment } from '@/api/api.js'
	export default {
		data() {
			return {
				// 0:未支付 1:待确认 2:待出行 3:已出行 ，待评价 4:已评价 4:已定金
				orderStatus: [
					{name: '待付款', status: 0}, 
					{name: '待确认', status: 1}, 
					{name: '待出行', status: 2},
					{name: '待评价', status: 3},
					{name: '已评价', status: 4},
					{name: '已定金', status: 5},
				],
				loadStatus: 'loadmore',
				filter: {
					outer_status: 0,
					page: 1
				},
				orderCurrent: 0,
				orderList: []
			}
		},
		methods:{
			orderStatusChange(index) {
				this.orderCurrent = index
				this.filter.outer_status = this.orderStatus[this.orderCurrent].status
			},
			getOrders() {
				if ( this.loadStatus == 'nomore' ) {
					return console.log('nomore')
				}
				
				uni.showLoading({
					title: '加载中'
				})
				this.loadStatus = 'loading'
				getRoutesOrders(uni.$lv.object.queryParams(this.filter)).then(res => {
					uni.hideLoading()
					let _result = res.data || []
					if ( !_result.length ) {
						return this.loadStatus = 'nomore'
					}
					this.orderList = uni.$lv.array.union(this.orderList , _result)
					this.loadStatus = 'loadmore'
				})
			},
			payment(orderId) {
				orderUnionPayment(orderId).then(payres => {
					if ( payres.data.pay_status == 1 ) {
						setTimeout(function(){
							uni.navigateTo({
								url: `/pages/order/routes?current=1`
							})
						},2000)
						
						return uni.showToast({
							title: "支付成功~",
						})
					}
					
					if ( payres.data.pay_params ) {
						uni.requestPayment({
							...payres.data.pay_params,
							success: () => {
								setTimeout(function(){
									uni.navigateTo({
										url: `/pages/order/routes?current=1`
									})
								},2000)
								return uni.showToast({
									title: "支付成功~",
								})
							},
							fail: () => {
								return uni.showToast({
									title: "支付失败~",
									icon: 'error'
								})
							}
						})
					}
				})
			},
			initPage() {
				this.loadStatus = 'loadmore'
				this.filter.page = 1
				this.orderList = []
				this.getOrders()
			}
		},
		onLoad: function (option) { 
			this.orderCurrent = parseInt(option.current)
		},
		mounted() {
			this.initPage()
		},
		/**
		 * 下拉刷新回调函数
		 */
		onPullDownRefresh() {
			this.initPage()
			uni.stopPullDownRefresh()
		},
		/**
		 * 上拉加载回调函数
		 */
		onReachBottom() {
			this.filter.page++
			this.getOrders()
		},
		watch: {
			'filter.outer_status': function(newVal , oldVal) {
				this.initPage()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $uni-bg-color-grey;
	}
	.order-index {
		.order-list {
			padding: 30rpx;
			.order-item {
				padding: 30rpx;
				background-color: #FFFFFF;
				border-radius: 20rpx;
				&__info {
					.title{
						font-size: 30rpx;
						margin-right: 20rpx;
						color: $uni-text-color-placeholder;
						width: 130rpx;
						@include flex;
						align-items: center;
					}
					.value {
						font-size: 32rpx;
						color: #333;
						flex: 1;
					}
				}
				&__info:not(:last-child){margin-bottom: 20rpx;}
			}
			.order-item:not(:last-child){margin-bottom: 40rpx;}
		}
	}
</style>
